<template>
  <view class="wrapper row">
    <view class="top">
      <view class="bg"></view>
      <view class="detail u-padding-30">
        <view style="background: #fff;border-radius: 8px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);" class="u-padding-30">
          <u-form :model="form" ref="uForm" label-width="160" :label-style="label_style">
            <u-form-item label="省份" :border-bottom="false">
              <u-input v-model="form.provinceName" type="select" placeholder="请选择" @click="show = true"/>
              <u-select v-model="show" mode="single-column" :list="provinceList" @confirm="res => actionSheetCallback(res, 'provinceName')"></u-select>
            </u-form-item>
            <u-form-item label="年份" :border-bottom="false">
              <view class="u-flex" @click="show1 = true">
                <view class="flex-1">{{form.year || '全部'}}</view>
                <view><u-icon name="arrow-down-fill" color="#c0c4cc"></u-icon></view>
              </view>
              <u-select v-model="show1" mode="single-column" :list="yearList" @confirm="res => actionSheetCallback(res, 'year')"></u-select>
            </u-form-item>
          </u-form>
          <u-button type="primary" :custom-style="customStyle" @click="getData">查询</u-button>
        </view>
      </view>
      <view class="tab_wrap u-padding-30">
        <view class="table">
          <view class="th bg-f2f2f2 row cont-center flex-around">
            <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">年份</view>
            <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">类型</view>
            <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">批次</view>
            <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">分数</view>
          </view>
          <block v-if="details.length">
            <view class="th row cont-center flex-around" :key="index"
                  v-for="(item, index) in details" :class="{'bg-f2f2f2': index % 2 != 0}">
              <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.year || '-'}}</view>
              <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.type || '-'}}</view>
              <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.batch || '-'}}</view>
              <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.score || '-'}}</view>
            </view>
          </block>
          <view v-if="!details.length" class="u-padding-20 color-999 u-font-sm u-text-center">暂无信息</view>
        </view>
      </view>
      <view class="color-999 u-font-xs u-text-center">
        <view class="u-padding-15">数据仅供参考，以各省招生办发布数据为准</view>
        <view class="u-p-b-20">最终解释权归本平台所有！</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {THEME} from "../mixins/config";
  import {request} from "../../util/api";
  import {getCurrentFullPath, TOAST} from "../../util/util";

  export default {
    data() {
      return {
        label_style: {
          fontWeight: 'bold'
        },
        customStyle: {
          background: THEME.btn_active_bg_color,
          boxShadow: '0px 2px 3px 0px rgba(0, 0, 0, 0.4)',
          padding: '0 30rpx',
          marginTop: '30px'
        },
        form: {
          pageNum: 1,
          pageSize: 999,
          provinceName: '重庆',
          year: ''
        },
        show: false,
        show1: false,
        details: [],
        yearList: [],
        provinceList: []
      }
    },

    onShow() {
      this.getData()
      this.getProvince()
      this.getYear()
    },

    methods: {
      actionSheetCallback(res, type) {
        this.form[type] = res[0].value
        this.getData()
      },

      getProvince() {
        request({
          url: '/system/wx/CompassBatchLine/getAllProvinceList',
          token: true,
          method: 'post'
        }).then(res => {
          let arr = res.data.map((item, index) => {
            return {
              label: item,
              value: item
            }
          })
          this.provinceList = arr
        })
      },

      getYear() {
        request({
          url: '/system/wx/CompassBatchLine/getAllYears',
          token: true,
          method: 'post'
        }).then(res => {
          let arr = res.data.map((item, index) => {
            return {
              label: item,
              value: item
            }
          })
          this.yearList = [{
              label: '全部',
              value: ''
            }].concat(arr)
        })
      },

      getData() {
        if (!this.form.provinceName) {
          TOAST("请完善表单")
          return
        }
        let {pageNum, pageSize, provinceName, year} = this.form
        let postData = {}
        let url = `/system/wx/CompassBatchLine/list/${this.form.pageNum}/${this.form.pageSize}/${this.form.year}/${this.form.provinceName}`
        if (year && !provinceName) {
          url = `/system/wx/CompassBatchLine/list/${pageNum}/${pageSize}/${year}`
          postData = {
            pageNum, pageSize, year
          }
        }
        if (!year && provinceName) {
          url = `/system/wx/CompassBatchLine/list/${pageNum}/${pageSize}/${provinceName}`
          postData = {
            pageNum, pageSize, provinceName
          }
        }
        if (year && provinceName) {
          url = `/system/wx/CompassBatchLine/list/${pageNum}/${pageSize}/${year}/${provinceName}`
          postData = {
            pageNum, pageSize, year, provinceName
          }
        }
        request({
          url: url,
          token: true,
          data: postData,
          platfom: 'weixin'
        }).then(res => {
          this.details = res.list
        })
      }
    },

    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }
</script>

<style scoped lang="scss">
  $active_color: #2A6AAA;
  .wrapper {
    flex-direction: column;
    height: 100%;

    .top {
      position: relative;

      .bg {
        background-image: linear-gradient(rgb(39, 148, 217), rgb(156, 210, 244));
        height: 260upx;
        border-radius: 0 0 100upx 100upx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
      }
    }
  }
</style>
